<template>
  <view style="width: 100%">
    <swiper
      style="width: 100%"
      :autoplay="true"
      class="swiper-box"
      @change="change"
    >
      <swiper-item
        v-for="(item, index) in mySwiper.info"
        :key="index"
        class="swiper-item"
      >
        <image
          style="width: 100%; height: 100%; border-radius: 10rpx"
          class="swiper_img"
          :src="item.img"
          mode=""
        ></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const mySwiper = reactive({
  info: [
    {
      content: '内容 A',
      img: 'http://zxc.ruanjian211.top/swiper/Snipaste_2023-03-21_18-19-19.png',
    },
    {
      content: '内容 B',
      img: 'http://zxc.ruanjian211.top/swiper/Snipaste_2023-03-21_18-19-35.png',
    },
    {
      content: '内容 C',
      img: 'http://zxc.ruanjian211.top/swiper/Snipaste_2023-03-21_18-19-53.png',
    },
  ],
  current: 0,
  mode: 'round',
})

const change = (e: any) => {
  mySwiper.current = e.detail.current
}
</script>

<style lang="scss" scoped>
.swiper-box {
  width: 100vw;
  height: 350rpx;
  border-radius: 10rpx;

  .swiper-item {
    width: 100vw;
    border-radius: 10rpx;
  }
}
</style>
